<template>
  <app-page>
    <div class="lookorder">
      <div class="userbctype">
        <BctypeLogin @refreshUserlist="refreshUserlist" />
        <UserList
          v-loading="userlistloading"
          :userlist="userlist"
          :activeuser="activeuser"
          @change="changeactive"
          @changeRefresh="changeRefresh"
        />
      </div>
      <Order
        v-loading="orderListloading"
        :orderList="orderList"
        :orderListloading="orderListloading"
        :searchdata="searchdata"
        :orderoptions="orderoptions"
        @changeSearch="changeSearch"
        @changeRefreshtime="changeRefreshtime"
        :refreshTime="refreshTime"
        :page="page"
      />
    </div>
  </app-page>
</template>

<script setup>
import { http } from '@/utils/http'
import { onMounted, provide } from 'vue'

import BctypeLogin from './components/BctypeLogin.vue'
import UserList from './components/UserList.vue'
import Order from './components/Order.vue'

const userform = ref({})
const allbctype = ref([])
const userlistloading = ref(false)
provide('allbctype', allbctype)

const userlist = ref([])
const activeuser = ref({})
const ismounted = ref(false)
const orderList = ref([])
const orderListloading = ref(false)
const searchdata = ref({
  bc_type: '',
  agent: '',
  member: 'all',
  league_id: 'all',
})
const page = ref({
  page: 1,
  page_size: 20,
  total: 0,
})
let kandanIntervalId
let userlistIntervalId
const refreshTime = ref({
  time: -1,
})

const orderoptions = ref({
  league_option: {
    name: '联赛',
    options: [],
  },
  member_option: {
    name: '用户',
    options: [],
  },
})

const getallbctype = () => {
  http.get('/read_list/get_platform_list').then(res => {
    allbctype.value = res.data
  })
}

const getuserlist = () => {
  clearInterval(userlistIntervalId)
  if (ismounted.value) {
    http
      .get('/read_list/get_agent_list')
      .then(res => {
        let a = []
        let b = []
        
        res.data.list.forEach(item => {
          if (item.status == 1) {
            a.push(item)
          } else {
            b.push(item)
          }
        })
        userlist.value = [...a, ...b]
        userlistloading.value = false
        userlistIntervalId = setInterval(() => {
          getuserlist()
        }, 3000)
      })
      .catch(error => {
        console.log(error)
        userlistloading.value = false
        userlistIntervalId = setInterval(() => {
          getuserlist()
        }, 3000)
      })
  }
}

const getorderoptions = () => {
  let body = {
    bc_type: searchdata.value.bc_type,
    agent: searchdata.value.agent,
  }
  http.post('/read_list/get_order_option', body).then(res => {
    orderoptions.value = res.data
  })
}

const refreshUserlist = () => {
  userlistloading.value = true
  getuserlist()
}

const changeactive = row => {
  activeuser.value = row
  orderListloading.value = true
  orderList.value = []
  page.value = {
    page: 1,
    page_size: 20,
    total: 200,
  }
  searchdata.value = {
    bc_type: row.bc_type,
    agent: row.user_name,
    member: 'all',
    league_id: 'all',
  }
  let body = {
    bc_type: searchdata.value.bc_type,
    agent: searchdata.value.agent,
    member: searchdata.value.member,
    league_id: searchdata.value.league_id,
    page: page.value.page,
    page_size: page.value.page_size,
  }
  getorderoptions()
  getorderList(body)
}

const changeSearch = data => {
  orderListloading.value = true
  orderList.value = []
  if (data == 1) {
    page.value = {
      page: 1,
      page_size: 20,
      total: 200,
    }
  }
  let body = {
    bc_type: searchdata.value.bc_type,
    agent: searchdata.value.agent,
    member: searchdata.value.member,
    league_id: searchdata.value.league_id,
    page: page.value.page,
    page_size: page.value.page_size,
  }
  getorderList(body)
}

const changeRefresh = () => {
  activeuser.value = {}
  orderList.value = []
  userlistloading.value = true
  clearInterval(kandanIntervalId)
  getuserlist()
}
const changeRefreshtime = () => {
  if (activeuser.value.bc_type != null) {
    clearInterval(kandanIntervalId)
    changeSearch(1)
  }
}

const getorderList = body => {
  clearInterval(kandanIntervalId)
  if (ismounted.value) {
    http
      .post('/read_list/order_list', body)
      .then(res => {
        orderList.value = res.data.list
        page.value.total = res.data.total
        orderListloading.value = false

        if (refreshTime.value.time != -1 && activeuser.value.bc_type != null) {
          kandanIntervalId = setInterval(() => {
            let body = {
              bc_type: searchdata.value.bc_type,
              agent: searchdata.value.agent,
              member: searchdata.value.member,
              league_id: searchdata.value.league_id,
              page: page.value.page,
              page_size: page.value.page_size,
            }
            getorderList(body)
          }, refreshTime.value.time * 1000)
        } else {
          clearInterval(kandanIntervalId)
        }
      })
      .catch(error => {
        orderListloading.value = false
        if (refreshTime.value.time != -1 && activeuser.value.bc_type != null) {
          kandanIntervalId = setInterval(() => {
            let body = {
              bc_type: searchdata.value.bc_type,
              agent: searchdata.value.agent,
              member: searchdata.value.member,
              league_id: searchdata.value.league_id,
              page: page.value.page,
              page_size: page.value.page_size,
            }
            getorderList(body)
          }, refreshTime.value.time * 1000)
        } else {
          clearInterval(kandanIntervalId)
        }
      })
  }
}

onMounted(() => {
  userlistloading.value = true
  ismounted.value = true
  getallbctype()
  getuserlist()
})
onUnmounted(() => {
  ismounted.value = false
  clearInterval(kandanIntervalId)
  clearInterval(userlistIntervalId)
})
</script>

<style lang="scss" scoped>
.lookorder {
  width: 100%;
  height: 100%;
  display: flex;
}

.userbctype {
  width: 256px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #eee;
}
</style>
